<template>
    <div>
        <TopNav :obj="obj"></TopNav>
        <!-- 表单 -->
        <div class="form-box">
            <el-form :inline="true" :model="pageObj" class="demo-form-inline">
                <el-form-item label="群组名称">
                    <el-input v-model="pageObj.keyword" placeholder="群组名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button size="small" type="primary" @click="onSubmit">搜索</el-button>
                    <span>搜索结果：{{ total }}</span>
                </el-form-item>
            </el-form>
            <el-button type="primary" @click="open">新建群组<i class="el-icon-plus el-icon--right"></i></el-button>
        </div>
        <!-- @editFn="edit" -->
        <GroudTable :tableData="tableData" :pageObj="pageObj" :total="total" :delFn="del" :getData="getData"></GroudTable>
        <!-- 弹框 -->
        <el-dialog :title="editId == '' ? '添加群组' : '修改群组'" v-model="show" width="30%">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="活动名称" prop="name">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="show = false">取 消</el-button>
                    <el-button type="primary" @click="add">确 定</el-button>
                </span>
            </template>

        </el-dialog>
    </div>
</template>

<script >
import TopNav from '@/components/TopNav.vue';
import GroudTable from './components/GroudTable.vue'
import { $DeviceData, $AddGroup, $EditGroup } from '@/api'
import { defineComponent, onMounted, reactive, toRefs } from 'vue';
import { ElMessage } from 'element-plus'




export default defineComponent({
    name: 'DeviceGroud',
    components: { TopNav, GroudTable },
    setup() {
        const Data = reactive({
            obj: {
                path: '设备',
                title: '节点群组',
                msg: '以分组的形式管理节点设备，提供了搜索、添加新的群组、重命名、移动设备等功能。'
            },
            tableData: [],
            pageObj: {
                currPage: 1,
                pageSize: 5,
                eui: '',
                online: null,
                agreement: '',
                data: null,
                keyword: ''
            },
            total: 1,
            show: false,
            ruleForm: {
                name: ''
            },
            rules: {
                name: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur' }
                ]
            },
            editId: ''
        })

        onMounted(() => {
            getData();
        })

        const getData = (obj) => {
             if (obj) {
                Data.pageObj = { ...obj }
            }
            $DeviceData(Data.pageObj).then(res => {
                Data.tableData = res.data.data;
                Data.total = res.data.total
            })
        }
        const onSubmit = () => {
            getData()
        }
        // 打开弹窗
        const open = () => {
            Data.editId = '';
            Data.ruleForm.name = '';
            Data.show = true;
        }
        //添加
        const add = () => {
            if (Data.editId == "") {
                $AddGroup({ groupName: Data.ruleForm.name }).then(res => {
                    if (res.data.code == 666) {
                        ElMessage({
                            message: '添加成功！',
                            type: 'success'
                        });
                        Data.show = false
                        Data.ruleForm.name = ''
                        Data.pageObj.currPage = 1
                        getData()
                    }
                })
            } else {
                $EditGroup({ id: Data.editId, groupName: Data.ruleForm.name }).then(res => {
                    if (res.data.msg == 'success') {
                        ElMessage({
                            message: '修改成功！',
                            type: 'success'
                        });
                        Data.show = false
                        getData()
                    }
                })
            }


        }
        // 修改
        const edit = (obj) => {
            Data.editId = obj.editId
            Data.ruleForm.name = obj.groupName
            Data.show = true
        }
        // 删除
        const del=(index)=>{
            Data.tableData.splice(index,1)
        }

        return { ...toRefs(Data), onSubmit, open, add, edit, getData , del }
    }
});
</script>

<style lang="less" scoped>
.form-box {
    // width: 100%;
    background: #fff;
    padding: 20px 10px 0;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    span {
        margin-left: 10px;
    }
}
</style>